<template>
  <f-layout class="flex flex-row bg-white" style="height: 100vh">
    <f-sider-panel
      v-model:collapsed="collapsed"
      @change="handleChange"
      :width="260"
      :minWidth="20"
      class="br">
      {{ collapsed }}
      <div v-for="item in 5" class="p20 m12 link-1-bg mb12">{{ item }}</div>
    </f-sider-panel>
    <f-layout-content class="p50" style="overflow-y: auto">
      <div v-for="item in 20" class="p20 brand-2-bg mb12">{{ item }}</div>
    </f-layout-content>
  </f-layout>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const collapsed = ref(true);
const handleChange = (collapsed) => {
  console.log(collapsed);
};
</script>
